:host {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  --loadingDisplay: none;
  --headerHeight: 0px;
  --footerHeight: 0px;
  --maskDisplay: none;
  --menuWidth: 0px;
  --height: 0px;
  --width: 0px;
  --left: 0px;
  --right: 0px;
  --top: 0px;
}

.layout-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  .layout-body-container {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    overflow: hidden;
  }
}

.layout-header {
  height: var(--headerHeight);
  position: relative;
  transition: all .2s ease-out;
  .layout-header-container {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

.layout-footer {
  height: var(--footerHeight);
  position: relative;
  transition: all .2s ease-out;
  .layout-footer-container {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
  }
}

.layout-menu {
  position: absolute;
  left: var(--left);
  bottom: var(--bottom);
  top: var(--top);
  width: var(--width);
  height: var(--height);
  right: var(--right);
  background: #fff;
  z-index: 2;
  transition: var(--transition) .3s ease-out;
  overflow: hidden;
  .layout-menu-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
}

.layout-mask {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: var(--maskBackground);
  z-index: 1;
  overflow: hidden;
  transition: all .3s ease-out;
  display: var(--maskDisplay);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .layout-loading {
    display: var(--loadingDisplay);
    .icon-loading {
      font-size: 35px;
      color: var(--loadingColor);
    }
  }
}
